<template>
    <el-card class="container">
        <template #header>
            <el-row>
                <el-col :span="2" class="label">
                    <span>类型:</span>
                </el-col>
                <el-col :span="7">
                    <el-input v-model.trim="enterprieName" placeholder="Please input enterprie" />
                </el-col>
                <el-col :span="3" class="query">
                    <el-button
                        type="primary"
                        size="small"
                        icon="el-icon-search"
                        @click="query">
                        查询
                    </el-button>
                </el-col>
            </el-row>
        </template>
         <div>
            <el-button
                type="primary"
                size="small"
                icon="el-icon-check"
                @click="approve">
                审核
            </el-button>
            <el-popconfirm
                v-if="multipleSelection.length > 0"
                title="确定拒绝吗？"
                @confirm="reject"
            >
                <template #reference>
                    <el-button
                        type="danger"
                        size="small"
                        icon="el-icon-delete">
                        拒绝
                    </el-button>
                </template>
            </el-popconfirm>
            <el-button
                v-else
                type="danger"
                size="small"
                icon="el-icon-delete"
                @click="reject"
                >
                拒绝
            </el-button>
        </div>
        <el-table
            v-loading="loading"
            ref="multipleTable"
            :data="enterpries"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="selectionChange"
        >
            <el-table-column
                type="selection"
                width="55"
            >
            </el-table-column>
            <el-table-column
                prop="id"
                label="Id"
                width="60"
            >
            </el-table-column>
            <el-table-column
                prop="description"
                label="企业名称"
            >
            </el-table-column>
            <el-table-column
                prop="isBlacked"
                label="是否通过审核"
                width="120"
            >
                <template #default="scope">
                    <span>{{scope.row.isBlacked ? 'Yes' : 'No'}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="permits"
                label="营业执照证"
                width="120"
            >
            </el-table-column>
            <el-table-column
                prop="corporator"
                label="经营许可证"
                width="120"
            >
            </el-table-column>
            <el-table-column
                prop="editDate"
                label="最后编辑时间"
            >
            </el-table-column>
            <el-table-column
                prop="editUserId"
                label="最后编辑用户"
            >
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="pageChange"
        >
        </el-pagination>
    </el-card>
    <Memo ref="memoRef" :submit="submit"></Memo>
</template>

<script>
import { ref, toRefs, reactive } from 'vue';
import { alert, url } from '../utils/index';
import useDate from '../utils/dayjs';
import { ApiClient } from '../utils/apiClient';
import Memo from '../components/Memo.vue';

export default {
    name: 'Enterprie',
    components: {
        Memo
    },
    setup() {
        const multipleTable = ref(null);
        const memoRef = ref();
        const apiClient = new ApiClient();

        const state = reactive({
            loading: false,
            enterprieName: '',
            enterpries: [],
            multipleSelection: [],
            total: 0,
            currentPage: 1,
            pageSize: 10,
            type: 'approve'
        });

        const query = () => {
            state.currentPage = 1;
            getEnterprie();
        }

        const getEnterprie = () => {
            state.loading = true;

            const request = {
                Keyword: state.enterprieName,
                PageSize: 10,
                PageIndex: state.currentPage
            }
            apiClient.get(url.enterprie, null, request).then(res => {
                if (!res) {
                    state.loading = false;
                    return;
                }

                try {
                    const { enterprieList, totalCount } = res;

                    enterprieList.forEach(e => {
                        const { date, formateDate } = useDate(e.editDate);
                        formateDate();

                        e.editDate = date;
                    });

                    state.enterpries = enterprieList || [];
                    state.total = totalCount;
                } catch (error) {
                    throw error;
                } finally {
                    state.loading = false;
                }
            })
        }

        const submit = (value) => {
            let isBlacked = state.type == 'approve';
            const apis = [];
            for (const id of state.multipleSelection) {
                apis.push(apiClient.put(url.enterprie, {
                    id: id,
                    isBlacked: isBlacked,
                    memo: value.memo
                }));
            }

            Promise.all(apis).then(res => {
                alert.success(isBlacked ? '审核通过' : '拒绝成功');
                memoRef.value.close();
                query();
            })
        }

        const approve = () => {
            if (!precheck()) return;

            state.type = 'approve';
            memoRef.value.open();
        }

        const reject = () => {
            if (!precheck()) return;

            state.type = 'reject';
            memoRef.value.open();
        }

        const precheck = () => {
            if (!state.multipleSelection || state.multipleSelection.length == 0) {
                alert.warn('请至少选择一项');
                return false;
            }

            return true;
        }

        const selectionChange = (val) => {
            state.multipleSelection = (val || []).map(e => e.id);
        }

        const pageChange = (val) => {
            state.currentPage = val;
            getEnterprie();
        }

        return {
            ...toRefs(state),
            memoRef,
            approve,
            multipleTable,
            selectionChange,
            reject,
            getEnterprie,
            pageChange,
            query,
            submit
        }
    }
}
</script>

<style scoped>
    .container {
        min-height: 100%;
    }

    .el-card .is-always-shadow {
        min-height: 100% !important;
    }
</style>